<template>
  <div class="warpper-box sendSalary">
    <enterprise-select v-if="userInfo.type == 4" ref="enterprise"
      @enterpriseChange="enterpriseChange"></enterprise-select>
    <!-- <a-card style="margin-top: 10px;">
      <div style="display: flex;justify-content: flex-start;align-items: flex-start;">
        <form-create v-model="params.fApi" :rule="params.rule" :option="params.option" @btn-search-click="loadTable(true)"
          @btn-reset-click="reset" />
        <span style="padding: 5px 0 0 0;">
          <a-button type="primary" icon="plus" @click="$refs.addInfo.add(enterpriseId)">新增</a-button>
        </span>
      </div>
    </a-card> -->
    <a-card style="margin-top: 10px;">
      <a-tabs v-model="tabsIndex" @change="tabsChange">
        <a-tab-pane key="1" tab="发票抬头"></a-tab-pane>
        <a-tab-pane key="2" tab="邮寄地址管理"></a-tab-pane>
      </a-tabs>
      <div v-if="tabsIndex == '1'">
        <a-form layout="inline">
          <a-form-item label="创建日期">
            <a-range-picker @change="rangeChange" valueFormat="YYYY-MM-DD" v-model="createDate" />
          </a-form-item>
          <a-form-item>
            <a-button type="primary" icon="search" @click="loadTable(true)">搜索</a-button>
            <a-button type="primary" icon="setting" @click="reset()">重置</a-button>
            <a-button type="primary" icon="plus" @click="$refs.addInfo.add(true, enterpriseId, tabsIndex)">新增</a-button>
          </a-form-item>
        </a-form>
        <a-table :columns="table.columns" :data-source="table.loadData" :pagination="table.pagination"
          @change="handleTableChange" rowKey="invoiceTitleId">
          <!-- 操作栏-->
          <span slot="action" slot-scope="text, record">
            <!-- 编辑模块 | 字段 -->
            <a @click="$refs.addInfo.add(record, enterpriseId, tabsIndex)">修改</a>
            <a-divider type="vertical" />
            <a-popconfirm title="是否确认删除订单？" ok-text="确认" cancel-text="取消" @confirm="delOrder(record)">
              <a>删除</a>
            </a-popconfirm>
            <span v-show="record.isDefault == 0">
              <a-divider type="vertical" />
              <a-popconfirm title="是否确认设为默认？" ok-text="确认" cancel-text="取消" @confirm="setDefault(record)">
                <a>设为默认</a>
              </a-popconfirm>
            </span>
          </span>
        </a-table>
      </div>
      <div v-else>
        <a-form layout="inline">
          <a-form-item label="收件人姓名">
            <a-input placeholder="请输入订单名称" v-model="params.mailName"></a-input>
          </a-form-item>
          <a-form-item label="收件人电话">
            <a-input placeholder="请输入订单编号" v-model="params.phone"></a-input>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" icon="search" @click="loadTable(true)">搜索</a-button>
            <a-button type="primary" icon="setting" @click="reset()">重置</a-button>
            <a-button type="primary" icon="plus" @click="$refs.addInfo.add(true, enterpriseId, tabsIndex)">新增</a-button>
          </a-form-item>
        </a-form>
        <a-table :columns="table.columns" :data-source="table.loadData" :pagination="table.pagination"
          @change="handleTableChange" rowKey="invoiceMailId">
          <!-- 操作栏-->
          <span slot="action" slot-scope="text, record">
            <!-- 编辑模块 | 字段 -->
            <a @click="$refs.addInfo.add(record, enterpriseId, tabsIndex)">修改</a>
            <a-divider type="vertical" />
            <a-popconfirm title="是否确认删除订单？" ok-text="确认" cancel-text="取消" @confirm="delOrder(record)">
              <a>删除</a>
            </a-popconfirm>
            <span v-show="record.isDefault == 0">
              <a-divider type="vertical" />
              <a-popconfirm title="是否确认设为默认？" ok-text="确认" cancel-text="取消" @confirm="setDefault(record)">
                <a>设为默认</a>
              </a-popconfirm>
            </span>
          </span>
        </a-table>
      </div>
    </a-card>
    <add-info ref="addInfo" @on-ok="addLoad"></add-info>
  </div>
</template>

<script>
import store from '@/store'
import AddInfo from "./invoiceHead_add.vue"
import EnterpriseSelect from "@/components/human/enterpriseSelect.vue"
import {
  OPTION_BLOCK,
  OPTION_INLINE
} from "../base_form"
import {
  getTitleTablePage,
  invoiceTitleDelete,
  invoiceTitleSetDefault,
  getMailTablePage,
  invoiceMailDelete,
  invoiceMailSetDefault,
} from "@/api/human/finance"
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'invoiceHead',
  components: {
    AddInfo,
    EnterpriseSelect
  },
  data() {
    return {
      tabsIndex: '1',
      createDate: [],
      params: {
        startDate: undefined,
        endDate: undefined
      },
      table: {
        columns: [],
        loadData: [],
        pagination: {
          current: 1,
          pageSize: 10,
          total: 0,
          showSizeChanger: true,
					showQuickJumper: true,
          pageSizeOptions: ["10", "20", "50", "100"],
          showTotal: total => `共有 ${total} 条数据`,
        }
      },
      pagination: { current: 1, pageSize: 10 },

      enterpriseId: "", // 企业id
      enterpriseName: "", // 企业名称
      enterpriseData: [], // 客户列表

      selectedRowKeys: [], // 选择的table数据id
      selectedRows: [], // 选择的table数据
    }
  },
  filters: {
    filterMore(value, num) {
      if (!value) return ''
      if (value.length > num) {
        return value.slice(0, num) + '...'
      }
      return value
    }
  },
  mounted() {
    window.addEventListener('keyup', this.keyDown);
    if (this.userInfo.type == 4) {
      this.$refs.enterprise.getEnterpriseData();
    } else {
      this.enterpriseId = this.userInfo.relationId
      this.loadTable(true);
    }
  },
  destroyed() {
    window.removeEventListener('keyup', this.keyDown);
  },
  beforeCreate() {
    this.events_form = this.$form.createForm(this, {
      name: 'events_form'
    })
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  methods: {
    // table复选框选择
    onSelectChange(selectedRowKeys, selectedRows) {
      // console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRows = selectedRows;
    },
    tabsChange(e) {
      if (e == 1) {
        this.params.startDate = undefined;
        this.params.endDate = undefined;
      } else {
        this.params.mailName = "";
        this.params.phone = "";
      }
      this.table.loadData = [];
      this.loadTable(true);
    },
    // 获取列表
    async loadTable(flag) {
      let params = this.params;
      if (flag) {
        this.table.pagination.current = 1;
        this.table.pagination.pageSize = 10;
      }
      if (this.tabsIndex == '1') {
        this.table.columns = [
          {
            title: '编号',
            dataIndex: 'invoiceTitleId'
          },
          {
            title: '纳税人识别号',
            dataIndex: 'taxpayerNumber'
          },
          {
            title: '地址',
            dataIndex: 'address',
          },
          {
            title: '电话',
            dataIndex: 'phone',
          },
          {
            title: '开户行',
            dataIndex: 'bank',
          },
          {
            title: '银行账号',
            dataIndex: 'bankAccount',
          },
          {
            title: '是否默认',
            dataIndex: 'isDefault',
            customRender: (text, row, index) => {
              if (text == 1) {
                return '是'
              } else if (text == 0) {
                return '否'
              }
              return ''
            },
          },
          {
            title: '创建时间',
            dataIndex: 'createdTime',
          },
          {
            title: '操作',
            dataIndex: 'action',
            fixed: 'right',
            width: "180px",
            scopedSlots: { customRender: 'action' }
          },
        ]
      } else {
        this.table.columns = [
          {
            title: '收件人姓名',
            dataIndex: 'mailName'
          },
          {
            title: '收件人电话',
            dataIndex: 'phone'
          },
          {
            title: '省份',
            dataIndex: 'province',
          },
          {
            title: '城市',
            dataIndex: 'city',
          },
          {
            title: '县(区)',
            dataIndex: 'area',
          },
          {
            title: '详细地址',
            dataIndex: 'address',
          },
          {
            title: '是否默认',
            dataIndex: 'isDefault',
            customRender: (text, row, index) => {
              if (text == 1) {
                return '是'
              } else if (text == 0) {
                return '否'
              }
              return ''
            },
          },
          {
            title: '创建时间',
            dataIndex: 'createdTime',
          },
          {
            title: '操作',
            dataIndex: 'action',
            fixed: 'right',
            width: "180px",
            scopedSlots: { customRender: 'action' }
          },
        ]
      }
      params.enterpriseId = this.enterpriseId;
      params.pageNum = this.table.pagination.current;
      params.pageSize = this.table.pagination.pageSize;
      const { code, data } = this.tabsIndex == '1' ? await getTitleTablePage(params) : await getMailTablePage(params);
      if (code === '1') {
        this.table.loadData = data.content;
        this.table.pagination.total = data.total || 0;
      }
    },
    handleTableChange(pagination) {
      this.table.pagination.current = pagination.current;
      this.table.pagination.pageSize = pagination.pageSize;
      this.loadTable(false);
    },
    rangeChange(e) {
      if (e || e.length > 0) {
        this.params.startDate = e[0];
        this.params.endDate = e[1]
      }
    },
    // 设置默认项
    async setDefault(row) {
      if (this.tabsIndex == '1') {
        let params = {
          invoiceTitleId: row.invoiceTitleId
        }
        const { code } = await invoiceTitleSetDefault(params);
        if (code === '1') {
          this.$message.success('操作成功');
          this.loadTable(true);
        }
      } else {
        let params = {
          invoiceMailId: row.invoiceMailId
        }
        const { code } = await invoiceMailSetDefault(params);
        if (code === '1') {
          this.$message.success('操作成功');
          this.loadTable(true);
        }
      }
    },
    // 删除列表订单
    async delOrder(row) {
      if (this.tabsIndex == '1') {
        let params = {
          invoiceTitleId: row.invoiceTitleId
        }
        const { code } = await invoiceTitleDelete(params);
        if (code === '1') {
          this.$message.success('操作成功');
          this.loadTable(true);
        }
      } else {
        let params = {
          invoiceMailId: row.invoiceMailId
        }
        const { code } = await invoiceMailDelete(params);
        if (code === '1') {
          this.$message.success('操作成功');
          this.loadTable(true);
        }
      }
    },
    // 企业选择回调
    enterpriseChange(value) {
      this.enterpriseId = value;
      this.loadTable(true);
    },
    addLoad() {
      this.loadTable(true);
    },
    reset() {
      this.params.startDate = undefined;
      this.params.endDate = undefined;
      this.params.mailName = "";
      this.params.phone = "";
      this.createDate = [];
      this.loadTable(true);
    }
  }
}
</script>
<style lang="less"></style>